<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList">搜索</el-button>
				<el-button type="text"  @click="importHandle">导出excel</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="对账状态">
				<el-select v-model="queryParams.reconciliationStatus" multiple placeholder="请选择对账状态">
					<el-option v-for="item in reconciliationStatusOptions" :key="item.value" :label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<div style="font-size: 12px;color:	#AAAAAA">注：智能柜下单出货之后订单直接变成已完成状态故不设置订单状态筛选项，且默认显示所有订单</div>
			</el-form-item>
		</el-form>
		
		<el-form inline style= "border-top:1.5px dotted  #e1e1e1;padding-top: 10px;">
			<el-form-item label="总订单数量" class="grid-content" style="color:crimson;">: {{'\xa0'+ countOrderNo.countOrderNo}} 单</el-form-item>
			<el-form-item label="子订单数量" class="grid-content" style="color:crimson;">: {{'\xa0'+ orderDetail.countOrderDetailNo }} 单
			</el-form-item>
			<el-form-item label="总金额" class="grid-content" style="color:crimson;">:{{ '\xa0'+ orderDetail.sumNum }} 元</el-form-item>
		</el-form>
		<el-table :data="list" :span-method='cellMerge' border :cell-style="{padding: '17px 0px'}" height="calc(100vh - 380px)">
			<el-table-column label="订单号" align="center" prop="orderNo"></el-table-column>
			<el-table-column label="订单名称" align="center" prop="orderName"></el-table-column>
			<el-table-column label="订单金额" align="center" prop="sumBudget"></el-table-column>
			<el-table-column label="子订单金额" align="center" prop="budget"></el-table-column>
			<el-table-column label="购买数量" align="center" prop="buyNum"></el-table-column>
			<el-table-column label="商品名称" align="center" prop="goodsName"></el-table-column>
			<el-table-column label="下单人" align="center" prop="name"></el-table-column>
			<el-table-column label="订单状态" align="center" prop="optional1"></el-table-column>
			<el-table-column label="对账状态" align="center" prop="reconciliationStatus"></el-table-column>
			<el-table-column label="下单组织" align="center" prop="orgAll"></el-table-column>
			<el-table-column label="下单时间" align="center" prop="createTime" width="151px"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		getSmartCabinetsList,
		smartCabinetsListOut,
		SmartCabinetsCount,
		SmartCabinetsCount1
	} from "@/api/leader/leaderapi";
	export default {
		name: "",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					reconciliationStatus: []
				},
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				orderDetail: {},
				countOrderNo: '',
				mergerItems: [
				                {   columnIndex:0,
				                    spanArr: [],
				                    pos: 0,
				                    prop: 'orderNo'
				                },
				                {   columnIndex:1,
				                    spanArr: [],
				                    pos: 0,
				                    prop: 'orderName'
				                },
								{   columnIndex:2,
								    spanArr: [],
								    pos: 0,
								    prop: 'sumBudget'
								}
								],
				reconciliationStatusOptions: [{
					value: '0',
					label: '未对账'
				}, {
					value: '1',
					label: '对账成功'
				}, {
					value: '2',
					label: '对账失败'
				}]
			};
		},
		// 初始化
		mounted() {
			this.getList();

		},
		// 函数集合
		methods: {
			cellMerge({row, column, rowIndex, columnIndex}) {//表格合并的方法
			                if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {//这里判断第几列需要合并
			                    let item = this.mergerItems.find(item => item.columnIndex === columnIndex)
			                    const _row = item.spanArr[rowIndex];
			                    const _col = _row > 0 ? 1 : 0;
			                    return {
			                        rowspan: _row,
			                        colspan: _col,
			                    }
			                }
			            },
			getSpanArr(data, array) {//循环数据处理
			                for (let n = 0; n < array.length; n++) {
			                    array[n].spanArr = []//数据清空(重新调此方法的时候需要清空上一次的数据)
			                    for (let i = 0; i < data.length; i++) {
			                        if (i === 0) {
			                            array[n].spanArr.push(1);
			                            array[n].pos = 0;
			                        } else {
			                            // 判断当前元素与上一个元素是否相同
			                            if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
			                                array[n].spanArr[array[n].pos] += 1;
			                                array[n].spanArr.push(0);
			                            } else {
			                                array[n].spanArr.push(1);
			                                array[n].pos = i;
			                            }
			                        }
			                    }
			                }
						},

			//初始化列表
			getList() {
				//传入订单详情和分页数据
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let params = {
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime
				}
				
				getSmartCabinetsList(params).then(res => {
					this.list = res.rows
					this.total = res.total
					this.getSpanArr(this.list, this.mergerItems)
				})
				SmartCabinetsCount(params).then(res => {
					this.orderDetail = res[0]
				})
				SmartCabinetsCount1(params).then(res => {
					this.countOrderNo = res[0]
				})

			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				if (this.timeModel) {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let newSearch = {
					beginTime: this.queryParams.beginTime ? this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
				}
				smartCabinetsListOut(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '智能柜订单统计.xls')
				})
			}
		}


	}
</script>

<style>

</style>
